import {defineComponent, onMounted, reactive, ref} from 'vue'
import SearchFrom from "./comp/SearchForm"
import {header, operateBtn as operateBtn1, toolBar} from "./data"
import {storeToRefs} from "pinia";
import TableList from "@/components/TableList";
import Dialog from "./comp/Dialog";
import {ElMessage, ElMessageBox} from "element-plus";
import {OrdersStore} from "@/stores/orders";
import {formatDateTime} from "@/utils/utils";

export default defineComponent({
    props:{
        is_user: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        // 用orders数据仓库
        const orders_store = OrdersStore()
        // 显示弹出框
        const visible = ref(false)
        // 是否为详情页面
        const isDetail = ref(false)
        const operateBtn = ref(operateBtn1)
        const diaTitle = ref("")
        const total = ref(0)
        // 从仓库中获取数据
        let {ordersList, ordersInfo} = storeToRefs(orders_store)
        // 搜索参数
        const queryParams = reactive({
            orders_name: undefined,
            type_id: undefined,
            pageNum: 1,
            pageSize: 10,
            is_user: props.is_user
        })

        const currentId = ref(undefined)

        // 获取资助订单列表
        const handleQuery = async () => {
            const res = await orders_store.getOrdersList(queryParams)
            total.value = res.total
        }

        // 改变页码大小
        const handleSizeChange = async (val) => {
            queryParams.pageSize = val
            await handleQuery()
        }

        // 改变当前页
        const handleCurrentChange = async (val) => {
            queryParams.pageNum = val
            await handleQuery()
        }

        // 点击编辑
        const handleEdit = async (id) => {
            await orders_store.getOrdersInfo(id)
            currentId.value = id
            visible.value = true
            diaTitle.value = "编辑资助订单"
            isDetail.value = false
        }

        // 点击查看详情
        const handleDetail = async (id) => {
            await handleEdit(id)
            await orders_store.getOrdersInfo(id)
            diaTitle.value = "查看详情"
            visible.value = true
            isDetail.value = true
        }

        // 关闭弹出框
        const closeDia = () => {
            ordersInfo.value = {}
            visible.value = false
        }

        // 保存弹出框
        const saveDia = async () => {
            const res = await orders_store.updateOrders(currentId.value, ordersInfo.value)
            closeDia()
            if (res) {
                ElMessage.success("修改成功")
                await handleQuery()
            } else {
                ElMessage.error("修改失败")
            }
        }

        // 删除资助订单
        const handleDelete = (id) => {
            ElMessageBox.confirm(
                '是否确认删除该资助订单？',
                'Warning',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(async () => {
                await orders_store.deleteOrders(id)
                ElMessage.success("删除成功")
                await handleQuery()
            })
                .catch((err) => {
                    ElMessage.error("取消删除")
                })
        }

        const changeValue = (name, value) => {
            ordersInfo.value[name] = value
        }

        const handleAdd = () => {
            orders_store.addOrders().then(res => {
                ElMessage.success("新增资助订单成功！")
                orders_store.getOrdersList()
                visible.value = false
            })
        }

        const handleBtn = (name, row) => {
            if (name === 'edit') {
                handleEdit(row.id)
            } else if (name === 'del') {
                handleDelete(row.id)
            }
        }

        const handleToolBar = (name) => {
            if (name === 'add') {
                visible.value = true
                diaTitle.value = '新增资助订单'
            }
        }

        const formatStatus = (status) => {
            if(status === 0) return <el-tag>待支付</el-tag>
            if(status === 1) return <el-tag class="ml-2" type="success">已支付</el-tag>
            if(status === 2) return <el-tag class="ml-2" type="warning">已取消</el-tag>
        }

        // 如果是用户页面
        if(props.is_user){

        }

        onMounted(async () => {
            await handleQuery()
        })


        return () => {
            return (
                <>
                    <div className="app-container">
                        <SearchFrom
                            is_user={props.is_user}
                            queryParams={queryParams}
                            handleQuery={handleQuery}/>
                        <TableList
                            tableData={ordersList.value}
                            handleSizeChange={handleSizeChange}
                            handleCurrentChange={handleCurrentChange}
                            handleBtn={handleBtn}
                            handleToolBar={handleToolBar}
                            header={header}
                            toolBar={toolBar}
                            operateBtn={operateBtn.value}
                            total={total.value}
                            v-slots={{
                                status: (row) => {
                                    return formatStatus(row.status)
                                },
                                title: (row) => {
                                    return <span>{row.cat_info.title}</span>
                                },
                                nick_name: (row) => {
                                    return <span>{row.user_info.nick_name}</span>
                                },
                                money: (row) => {
                                    return <span>{row.money}元</span>
                                },
                                createdAt: (row) => {
                                    return formatDateTime(row.createdAt)
                                },
                            }}
                        />
                        <Dialog
                            diaTitle={diaTitle.value}
                            visible={visible}
                            diaForm={ordersInfo.value}
                            isDetail={isDetail.value}
                            changeValue={changeValue}
                            handleAdd={handleAdd}
                            saveDia={saveDia}
                            closeDia={closeDia}
                        />
                    </div>
                </>
            )
        }
    }
})